<template>
  <div class="main">
    <div class="mainbox">
      <div class="mainbox-leftBox">
        <div class="mainbox-leftBox-nav">
          <div
            class="mainbox-leftBox-nav-top"
            style="padding: 0.05rem 0.13rem; min-height: 0.35rem"
          >
            <div style="display: flex; align-items: center; width: 100%">
              宝贝筛选 <i class="el-icon-arrow-right"></i>
              <div style="display: flex; flex-wrap: wrap; max-width: 90%">
                <div
                  v-for="(tag, index) in tags"
                  :key="index"
                  style="margin-top: 0.05rem"
                >
                  <el-tag
                    @close="del(index, tag)"
                    v-if="tag"
                    style="margin-right: 0.1rem"
                    closable
                    type="danger"
                  >
                    {{ tag.name }}
                  </el-tag>
                </div>
              </div>
            </div>

            <div
              style="width: 145px; text-align: right; cursor: pointer"
              @click="chongzhi"
            >
              <i class="el-icon-delete"></i> 清空筛选条件
            </div>
          </div>
          <div class="mainbox-leftBox-nav-bottom">
            <div class="mainbox-leftBox-nav-bottom-item">
              <div class="mainbox-leftBox-nav-bottom-item-left">童装频道</div>
              <div class="mainbox-leftBox-nav-bottom-item-right">
                <div
                  :class="indexOne == index ? 'redText' : ''"
                  @click="getOne(index, item)"
                  class="mainbox-leftBox-nav-bottom-item-right-item"
                  v-for="(item, index) in tongzhuang"
                  :key="index"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>

            <div class="mainbox-leftBox-nav-bottom-item">
              <div
                class="mainbox-leftBox-nav-bottom-item-left"
                style="min-height: 0.7rem"
              >
                类目
              </div>
              <div class="mainbox-leftBox-nav-bottom-item-right">
                <div
                  @click="getTow(index, item)"
                  :class="indexTow == index ? 'redText' : ''"
                  class="mainbox-leftBox-nav-bottom-item-right-item"
                  v-for="(item, index) in typelist"
                  :key="index"
                >
                  {{ item.name }}
                </div>
                <div
                  @click="show = !show"
                  class="mainbox-leftBox-nav-bottom-item-right-item"
                >
                  {{ show ? "收起" : "更多" }}
                  <i
                    :class="show ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                  ></i>
                </div>
                <div
                  style="width: 100%; display: flex; flex-wrap: wrap"
                  v-if="show"
                >
                  <div
                    @click="getTowB(index, item)"
                    :class="indexTowB == index ? 'redText' : ''"
                    class="mainbox-leftBox-nav-bottom-item-right-item"
                    v-for="(item, index) in typelistTow"
                    :key="index"
                  >
                    {{ item.name }}
                  </div>
                </div>
              </div>
            </div>

            <div class="mainbox-leftBox-nav-bottom-item">
              <div class="mainbox-leftBox-nav-bottom-item-left">地区</div>
              <div class="mainbox-leftBox-nav-bottom-item-right">
                <div
                  @click="getSan(index, item)"
                  class="mainbox-leftBox-nav-bottom-item-right-item"
                  :class="indexSan == index ? 'redText' : ''"
                  v-for="(item, index) in addressList"
                  :key="index"
                >
                  {{ item.value }}
                </div>
                <div
                  v-if="addressListTow.length"
                  @click="showB = !showB"
                  class="mainbox-leftBox-nav-bottom-item-right-item"
                >
                  {{ showB ? "收起" : "更多" }}
                  <i
                    :class="showB ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                  ></i>
                </div>
                <div
                  style="width: 100%; display: flex; flex-wrap: wrap"
                  v-if="showB"
                >
                  <div
                    @click="getSanB(index, item)"
                    :class="indexSanB == index ? 'redText' : ''"
                    class="mainbox-leftBox-nav-bottom-item-right-item"
                    v-for="(item, index) in addressListTow"
                    :key="index"
                  >
                    {{ item.value }}
                  </div>
                </div>
              </div>
            </div>

            <div class="mainbox-leftBox-nav-bottom-item">
              <div class="mainbox-leftBox-nav-bottom-item-left">价格</div>
              <div class="mainbox-leftBox-nav-bottom-item-right">
                <div
                  @click="getSi(index, item)"
                  :class="indexSi == index ? 'redText' : ''"
                  class="mainbox-leftBox-nav-bottom-item-right-item"
                  v-for="(item, index) in priceList"
                  :key="index"
                >
                  {{ item.value }}元
                </div>
              </div>
            </div>

            <div class="mainbox-leftBox-nav-bottom-item">
              <div class="mainbox-leftBox-nav-bottom-item-left">基础属性</div>
              <div class="mainbox-leftBox-nav-bottom-item-right">
                <div
                  class="mainbox-leftBox-nav-bottom-item-right-item"
                  v-for="item in basicProps"
                  :key="item.id"
                >
                  <el-dropdown placement="bottom">
                    <span class="el-dropdown-link">
                      {{ item.name
                      }}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item></el-dropdown-item>
                      <div
                        style="
                          display: flex;
                          max-width: 6rem;
                          flex-wrap: wrap;
                          font-size: 16px;
                        "
                      >
                        <div
                          style="margin: 10px; cursor: pointer"
                          v-for="(childItem, childIndex) in item.inputList"
                          :key="childIndex"
                          @click="getType(item, childItem)"
                        >
                          {{ childItem }}
                        </div>
                      </div>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
                <div
                  v-if="basicProps.length"
                  @click="showC = !showC"
                  class="mainbox-leftBox-nav-bottom-item-right-item"
                >
                  {{ showC ? "收起" : "更多" }}
                  <i
                    :class="showC ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                  ></i>
                </div>
                <div
                  style="width: 100%; display: flex; flex-wrap: wrap"
                  v-if="showC"
                >
                  <div
                    class="mainbox-leftBox-nav-bottom-item-right-item"
                    v-for="item in basicPropsTow"
                    :key="item.id"
                  >
                    <el-dropdown placement="bottom">
                      <span class="el-dropdown-link">
                        {{ item.name
                        }}<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item></el-dropdown-item>
                        <div
                          style="
                            display: flex;
                            max-width: 6rem;
                            flex-wrap: wrap;
                            font-size: 16px;
                          "
                        >
                          <div
                            style="margin: 10px; cursor: pointer"
                            v-for="(childItem, childIndex) in item.inputList"
                            :key="childIndex"
                            @click="getType(item, childItem)"
                          >
                            {{ childItem }}
                          </div>
                        </div>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </div>
              </div>
            </div>

            <div class="mainbox-leftBox-nav-bottom-item">
              <div class="mainbox-leftBox-nav-bottom-item-left">您可能在找</div>
              <div class="mainbox-leftBox-nav-bottom-item-right">
                <div
                  @click="getWu(index, item)"
                  :class="indexWu == index ? 'redText' : ''"
                  class="mainbox-leftBox-nav-bottom-item-right-item"
                  v-for="(item, index) in maybeFind"
                  :key="index"
                >
                  {{ item.value }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="mainbox-leftBox-goods">
          <div
            class="mainbox-leftBox-goods-top"
            style="justify-content: space-between"
          >
            <div class="newBox">
              <div
                class="item"
                @click="getIconType(0)"
                :class="newIndex == 0 ? 'newItem' : ''"
              >
                综合
              </div>
              <div
                class="item"
                @click="getIconType(1)"
                :class="newIndex == 1 ? 'newItem' : ''"
              >
                人气
              </div>
              <div
                class="item"
                @click="getIconType(2)"
                :class="newIndex == 2 ? 'newItem' : ''"
              >
                最新
              </div>
              <div class="item" style="margin-right: 0.1rem">
                价格
                <i
                  @click="getIconType(3)"
                  class="el-icon-caret-top up"
                  :class="newIndex == 3 ? 'newItem' : ''"
                ></i>
                <i
                  @click="getIconType(4)"
                  class="el-icon-caret-bottom down"
                  :class="newIndex == 4 ? 'newItem' : ''"
                ></i>
              </div>
              <div class="item noborder">
                <el-dropdown>
                  <span class="el-dropdown-link" style="font-size: 0.16rem">
                    退换保障<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu class="newdROP" slot="dropdown">
                    <el-dropdown-item
                      ><div @click="thh(1)">15天退货</div></el-dropdown-item
                    >
                    <el-dropdown-item
                      ><div @click="thh(2)">15天换货</div></el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div class="search">
                自定义价格
                <el-input
                  class="inputStyle"
                  v-model="input"
                  placeholder=""
                  style="width: 0.45rem; margin: 0 0.03rem"
                ></el-input>
                至
                <el-input
                  class="inputStyle"
                  v-model="input1"
                  placeholder=""
                  style="width: 0.45rem; margin: 0 0.03rem"
                ></el-input>
                <div class="search-button" @click="query">查询</div>
              </div>
            </div>
            <div class="newRightBox">
              为您提供{{ total }}件相关产品
              <div class="newBox1">
                <span class="pageBox" style="color: #ff4400">{{
                  form.pageNumber
                }}</span>
                / {{ pages }}
              </div>
              <div class="newBtnBox">
                <div
                  class="newBtnBoxS huiBtN"
                  v-if="form.pageNumber == 1"
                  style="border-right: 1px solid #e8e8e8"
                >
                  <
                </div>
                <div
                  class="newBtnBoxS"
                  @click="qianBtn"
                  v-else
                  style="border-right: 1px solid #e8e8e8"
                >
                  <
                </div>
                <div class="newBtnBoxS huiBtN" v-if="form.pageNumber == pages">
                  >
                </div>
                <div class="newBtnBoxS" @click="houBtn" v-else>></div>
              </div>
            </div>
            <!-- <div class="item" style="margin-left: 0.6rem">
              为您提供相关<span style="color: #333333">{{total}}</span> 件商品
            </div>
            <div class="item">
              1/90
              <div class="pagebutton"><</div>
              <div class="pagebutton">></div>
            </div> -->
          </div>
          <div class="mainbox-leftBox-goods-medium">
            <Card
              :key="index"
              v-for="(item, index) in shopList"
              :width="'2.2'"
              :item="item"
              height="2.08"
              :bottom="'0.4'"
              :boxheight="'3.8'"
              :type="true"
            ></Card>
          </div>

          <div class="mainbox-leftBox-goods-bottom">
            <el-pagination
              background
              style="font-size: 0.16rem"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="20"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>

      <div class="mainbox-rightBox">
        <div class="mainbox-rightBox-top">
          <img
            class="img"
            src="../../assets/image/commodity/tuijian.png"
            alt=""
          />
          <!-- <div class="righttext">广告</div> -->
        </div>

        <!-- <div class="mainbox-rightBox-adWei">
          <img
            class="img"
            src="../../assets/image/commodity/example.png"
            alt=""
          />
          <div class="message">
            <div class="price">
              <div class="priceNum">￥59</div>
              <div class="label">
                <img
                  class="img"
                  src="../../assets/image/commodity/textbg.png"
                  alt=""
                />
                <div class="text">一件代发</div>
              </div>
            </div>
            <div class="msgItem">商家名称：欧昵蔻</div>
            <div class="msgItem">
              主要属性：<span class="num">2</span>色<span class="num">7</span>码
            </div>
            <div class="msgItem">商家类型：诚信商家</div>
          </div>
        </div> -->

        <div
          class="mainbox-rightBox-recommend"
          v-for="(item, index) in adData"
          :key="index"
        >
          <recommend :item="item"></recommend>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { pmsChannel } from "@/api/seller/management";
import { selectAllCondition } from "@/api/commodity";
import { selectAllByParams } from "@/api/seller/cangpushop";
import Card from "./components/Card.vue";
import recommend from "./components/recommend.vue";
import { getAllAd } from "@/api/home/index";
export default {
  components: {
    Card,
    recommend,
  },

  data() {
    return {
      pages: null,
      adData: [],
      input1: "",
      newIndex: 0,
      indexWu: null,
      indexSi: null,
      indexSan: null,
      indexSanB: null,
      tags: [],
      total: null,
      form: {
        pageNumber: 1,
        pageSize: 20,
        categoryId: "",
        market: "",
        priceRange: "",
        attributes: [],
        lookingFor: "",
        channelId: "",
        orderBy: "0",
      },
      showC: false,
      indexTowB: null,
      indexTow: null,
      indexOne: null,
      show: false,
      popularitylist: [],
      middlelist: [],
      tongzhuang: [],
      tongzhuangIndex: -1,
      typelist: [],
      typelistTow: [],
      addressList: [],
      priceList: [],
      basicProps: [],
      maybeFind: [],
      input: "",
      currentPage: 1,
      addressListTow: [],
      showB: false,
      basicPropsTow: [],
      shopList: [],
      arr: [],
    };
  },
  created() {
    this.pmsChannel();
    this.selectAllCondition();
    // this.selectAllByParams()
    this.getAllAd();
  },
  activated() {
    if (this.$route.query.goodsName) {
      this.form.goodsName = this.$route.query.goodsName;
    }
    this.selectAllByParams();
    this.selectAllCondition();
    this.selectAllByParams();
  },
  methods: {
    // 获取右侧广告
    getAllAd() {
      getAllAd({
        adType: 1,
      }).then((data) => {
        this.adData = data.data.productRepository_recommend;
      });
    },
    query() {
      if (this.input == "") {
        this.$message({
          message: "请输入最小值",
          type: "warning",
        });
        return false;
      }
      if (this.input1 == "") {
        this.$message({
          message: "请输入最值",
          type: "warning",
        });
        return false;
      }
      this.form.priceRange = `${this.input}-${this.input1}`;
      this.selectAllByParams();
    },
    // 退换保障
    thh(index) {
      this.form.safeguard = index + "";
      this.selectAllByParams();
    },
    // 选择综合人气排序
    getIconType(index) {
      this.newIndex = index;
      this.form.orderBy = index + "";
      this.selectAllByParams();
    },
    // 重置
    chongzhi() {
      this.tags = [];
      this.form = {
        pageNumber: 1,
        pageSize: 20,
        categoryId: "",
        market: "",
        priceRange: "",
        attributes: [],
        lookingFor: "",
        channelId: "",
      };
      this.indexOne = null;
      this.indexSanB = null;
      this.indexSan = null;
      this.indexTow = null;
      this.indexTowB = null;
      this.indexSi = null;
      this.indexWu = null;
      this.selectAllByParams();
    },
    del(index, item) {
      this.tags.splice(index, 1);
      if (index == 0) {
        this.form.lookingFor = "";
        this.form.channelId = "";
        this.indexOne = null;
        this.indexWu = null;
      } else if (index == 1) {
        this.indexTow = null;
        this.indexTowB = null;
        this.form.categoryId = "";
      } else if (index == 2) {
        this.indexSanB = null;
        this.indexSan = null;
        this.form.market = "";
      } else if (index == 3) {
        this.indexSi = null;
        this.form.priceRange = "";
      } else {
        this.arr.forEach((item1, index) => {
          if (item1.id == item.id) {
            this.arr.splice(index, 1);
          }
        });
        const newArr = [];
        this.arr.forEach((item) => {
          newArr.push(item.value);
        });
        if (newArr.length) {
          this.form.attributes = newArr.join(",");
        }
      }
      this.selectAllByParams();
    },
    // 你可能选中
    getWu(index, item) {
      this.indexWu = index;
      this.tags[1] = {
        name: `你可能再找：${item.value}`,
        id: 5,
      };
      this.form.lookingFor = item.value;
      this.selectAllByParams();
    },
    getType(item, name) {
      console.log(item, name);
      const obj = {
        name: `${item.name}：${name}`,
        id: item.id,
        value: name,
      };
      let show = true;
      let showB = true;

      this.tags.forEach((item1) => {
        if (item1.id == item.id) {
          item1.name = `${item.name}：${name}`;
          show = false;
        }
      });
      this.arr.forEach((item1) => {
        if (item1.id == item.id) {
          item1.value = name;
          showB = false;
        }
      });
      if (show) {
        this.tags.push(obj);
      }
      if (showB) {
        this.arr.push(obj);
      }
      const newArr = [];
      this.arr.forEach((item) => {
        newArr.push(item.value);
      });
      if (newArr.length) {
        this.form.attributes = newArr.join(",");
        this.selectAllByParams();
      }
    },
    // 价格选中
    getSi(index, item) {
      this.indexSi = index;
      this.tags[3] = {
        name: `价格：${item.value}`,
        id: 3,
      };
      this.form.priceRange = item.value;
      this.selectAllByParams();
    },
    // 地区选中
    getSan(index, item) {
      this.indexSan = index;
      this.indexSanB = null;
      this.tags[2] = {
        name: `地区：${item.value}`,
        id: 2,
      };
      this.form.market = item.value;
      this.selectAllByParams();
    },
    getSanB(index, item) {
      this.indexSan = null;
      this.indexSanB = index;
      this.tags[2] = {
        name: `地区：${item.value}`,
        id: 2,
      };
      this.form.market = item.value;
      this.selectAllByParams();
    },
    getOne(index, item) {
      this.indexOne = index;
      this.tags[0] = {
        name: `频道：${item.name}`,
        id: 0,
      };
      this.form.channelId = item.id;
      this.selectAllByParams();
    },
    // 获取商品列表
    selectAllByParams() {
      selectAllByParams(this.form).then((data) => {
        this.shopList = data.data.records;
        this.total = data.data.total;
        this.pages = data.data.pages;
      });
    },
    // 获取基础属性
    getTow(index, item) {
      this.tags[1] = {
        name: `类目：${item.name}`,
        id: 1,
      };
      this.indexTow = index;
      this.indexTowB = null;
      selectAllCondition({
        categoryId: item.id,
      }).then((data) => {
        data.data[3].item.forEach((item) => {
          item.inputList = item.inputList = item.inputList.split(",");
        });
        this.basicProps = data.data[3].item.slice(0, 6);
        this.basicPropsTow = data.data[3].item.slice(
          6,
          data.data[3].item.length - 1
        );
      });
      this.form.categoryId = item.id;
      this.selectAllByParams();
    },
    getTowB(index, item) {
      this.tags[1] = {
        name: `类目：${item.name}`,
        id: 1,
      };
      this.indexTow = null;
      this.indexTowB = index;
      selectAllCondition({
        categoryId: item.id,
      }).then((data) => {
        data.data[3].item.forEach((item) => {
          item.inputList = item.inputList = item.inputList.split(",");
        });
        this.basicProps = data.data[3].item.slice(0, 8);
        this.basicPropsTow = data.data[3].item.slice(
          8,
          data.data[3].item.length - 1
        );
      });
      this.form.categoryId = item.id;
      this.selectAllByParams();
    },
    //上方前进一页
    qianBtn() {
      this.form.pageNumber = this.form.pageNumber - 1;
      this.currentPage = this.form.pageNumber;
      this.selectAllByParams();
    },
    houBtn() {
      this.form.pageNumber = this.form.pageNumber + 1;
      this.currentPage = this.form.pageNumber;
      this.selectAllByParams();
    },
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.selectAllByParams();
    },
    handleCurrentChange(val) {
      this.form.pageNumber = val;
      this.selectAllByParams();
    },
    // 获取所有类目
    selectAllCondition() {
      selectAllCondition().then((data) => {
        this.typelist = data.data[0].item.slice(0, 9);
        this.typelistTow = data.data[0].item.slice(
          9,
          data.data[0].item.length - 1
        );
        if (this.$route.query.categoryId) {
          const cateId = this.$route.query.categoryId;
          data.data[0].item.forEach((item, index) => {
            if (cateId == item.id) {
              if (index <= 9) {
                this.getTow(index, item);
              } else {
                this.show = true;
                this.getTowB(index, item);
              }
            }
          });
        }

        this.addressList = data.data[1].item.slice(0, 7);
        this.addressListTow = data.data[1].item.slice(
          7,
          data.data[1].item.length - 1
        );
        this.priceList = data.data[2].item;
        this.maybeFind = data.data[4].item;
      });
    },
    // 获取频道
    pmsChannel() {
      pmsChannel().then((data) => {
        this.tongzhuang = data.data;
      });
    },
  },
  watch: {
    $route() {
      if (this.$route.query.goodsName || this.$route.query.goodsName == "") {
        this.form.goodsName = this.$route.query.goodsName;
        this.selectAllByParams();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.newBox {
  display: flex;
  align-items: center;
}
.newBox1 {
  margin: 0 5px;
  .pageBox {
    color: #ff4400;
  }
}
.newBtnBox {
  border: 1px solid #e8e8e8;
  background: #fff;
  display: flex;
  cursor: pointer;
  margin: 0 10px;
  .newBtnBoxS {
    width: 35px;
    height: 22px;
    text-align: center;
    line-height: 22px;
  }
  .huiBtN {
    background: #f8f8f8;
    cursor: not-allowed;
  }
}
.newRightBox {
  display: flex;
  align-items: center;
}
::v-deep .el-carousel__arrow--left {
  border-radius: 0 0.2rem 0.2rem 0 !important;
  left: 0;
}
::v-deep .el-carousel__arrow--right {
  border-radius: 0.2rem 0 0 0.2rem !important;
  right: 0;
}
::v-deep .el-dropdown {
  font-size: 0.16rem !important;
}

.main {
  width: 100%;
  // height: 100%;
  background-color: #f5f7f9;
  .redText {
    color: #e22a1f !important;
  }
  .mainbox {
    margin: 0.3rem auto;
    width: 12rem;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    &-leftBox {
      width: 9.48rem;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      &-nav {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        &-top {
          width: calc(100% - 0.26rem);
          padding: 0 0.13rem;

          font-size: 0.16rem;
          color: #666666;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #ffffff;
          border: 1px solid #e8e8e8;
          border-bottom: none;
        }
        &-bottom {
          width: 100%;
          height: auto;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          border: 1px solid #e8e8e8;
          &-item {
            width: 100%;
            min-height: 0.4rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: PingFang SC-Regular, PingFang SC;
            font-size: 0.16rem;
            &-left {
              width: 0.9rem;
              padding: 0 0.12rem;
              background: #f8f8f8;
              text-align: left;
              min-height: 0.4rem;
              line-height: 0.4rem;
              color: #999999;
              border-bottom: 1px solid #fdfdfd;
            }
            &-right {
              padding: 0 0.18rem;
              flex: 1;
              min-height: 0.4rem;
              background: #ffffff;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              flex-wrap: wrap;
              &-item {
                width: auto;
                height: 0.3rem;
                padding: 0.1rem 0.18rem;
                color: #000000;
                text-align: center;
                line-height: 0.3rem;
                cursor: pointer;
              }
            }
          }
        }
      }
      &-goods {
        margin-top: 0.3rem;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        &-top {
          width: 100%;
          height: 0.4rem;
          display: flex;
          //justify-content: space-between;
          align-items: center;
          font-size: 0.16rem;
          color: #666666;
          background: #ffffff;
          border: 1px solid #e8e8e8;
          ::v-deep .el-input__inner {
            height: 0.22rem !important;
            padding: 0 !important;
          }
          .noborder {
            border-right: 0px !important;
          }
          .item {
            cursor: pointer;
            height: 0.4rem;
            line-height: 0.4rem;
            width: auto;
            padding: 0 0.15rem;
            display: flex;
            font-size: 0.13rem;
            align-items: center;
            position: relative;
            border-right: 1px solid #e8e8e8;
            .up {
              position: absolute;
              top: 0.1rem;
              left: 0.4rem;
              font-size: 13px;
              color: #d8d8d8;
              cursor: pointer;
            }
            .down {
              position: absolute;
              font-size: 13px;
              color: #d8d8d8;
              top: 0.2rem;
              left: 0.4rem;
              cursor: pointer;
            }
            .pagebutton {
              margin-left: 0.1rem;
              width: 0.36rem;
              height: 0.2rem;
              line-height: 0.2rem;
              text-align: center;
              color: #999999;
              background: #ffffff;
              box-sizing: border-box;
              border: 0.01rem solid #e8e8e8;
            }
          }
          .newItem {
            color: #ec6c15;
            font-weight: bold;
          }
          .search {
            width: auto;
            padding: 0 0.15rem;
            height: 0.4rem;
            font-size: 0.13rem;
            line-height: 0.4rem;
            display: flex;
            align-items: center;
            .inputStyle {
            }
            &-button {
              cursor: pointer;
              margin-left: 0.1rem;
              width: 0.5rem;
              height: 0.25rem;
              line-height: 0.22rem;
              text-align: center;
              background: #e3e3e3;
              box-sizing: border-box;
              border: 0.01rem solid rgba(0, 0, 0, 0);
            }
          }
        }
        &-medium {
          width: calc(100% - 0.2rem);
          padding: 0.1rem;
          background: #ffffff;
          height: auto;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
        }
        &-bottom {
          width: calc(100% - 0.2rem);
          padding: 0.1rem 0.1rem 0.3rem 0.1rem;
          background: #ffffff;
          height: 0.4rem;
          display: flex;
          justify-content: center;
          align-items: center;
          ::v-deep
            .el-pagination.is-background
            .el-pager
            li:not(.disabled).active {
            background-color: #e22a1f !important;
          }
          ::v-deep .el-pager li {
            width: 0.4rem !important;
            height: 0.4rem !important;
            line-height: 0.4rem !important;
            border-radius: 0.04rem !important;
          }

          ::v-deep .el-pagination span {
            height: 0.4rem !important;
            line-height: 0.4rem !important;
          }
          ::v-deep .el-pagination button {
            width: 0.4rem !important;
            height: 0.4rem !important;
            line-height: 0.4rem !important;
            border-radius: 0.04rem !important;
          }
        }
      }
    }
    &-rightBox {
      width: 2.2rem;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      &-top {
        width: 2.5rem;
        height: 0.56rem;
        background: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .img {
          width: 0.9rem;
          margin-left: 0.2rem;
        }
        .righttext {
          margin-right: 0.26rem;
          color: #a7adb8;
          letter-spacing: 0.02rem;
          font-size: 0.14rem;
        }
      }
      &-adWei {
        margin-top: 0.1rem;
        width: 2.2rem;
        height: 3.6rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        background: #ffffff;
        .img {
          width: 2.2rem;
          height: 2.5rem;
        }
        .message {
          width: 2.2rem;
          flex: 1;
          margin-bottom: 0.1rem;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          .price {
            width: 1.96rem;
            padding: 0 0.12rem;
            height: 0.4rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .priceNum {
              font-size: 0.16rem;
              color: #e22a1f;
            }
            .label {
              width: 0.64rem;
              height: 0.18rem;
              position: relative;
              .text {
                color: #ffffff;
                font-size: 0.12rem;
                z-index: 10;
                width: 0.64rem;
                height: 0.18rem;
                line-height: 0.18rem;
                text-align: center;
                position: absolute;
                top: 0;
                left: 0;
              }
              .img {
                width: 0.64rem;
                height: auto;
                position: absolute;
                top: 0;
                left: 0;
              }
            }
          }
          .msgItem {
            width: 1.96rem;
            padding: 0 0.12rem;
            flex: 1;
            text-align: left;
            color: #666666;
            font-size: 0.12rem;
            .num {
              color: #ff4d6d;
            }
          }
        }
      }
      &-recommend {
        margin-top: 0.1rem;
        width: 2.5rem;
        cursor: pointer;
        // height: 3.6rem;
        background: #ffffff;
      }
    }
  }
}
</style>
<style>
.newdROP {
  display: flex;
  /* top: 816px !important; */
  /* max-width: 6rem !important; */
  flex-wrap: wrap;
}
</style>
<style scoped lang="scss">
@media screen and (max-width: 1300px) {
  .main {
    width: 100%;
    // height: 100%;
    background-color: #f5f7f9;
    .redText {
      color: #e22a1f !important;
    }
    .mainbox {
      margin: 0.3rem auto;
      width: 90%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      &-leftBox {
        width: 14.8rem;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        &-nav {
          width: 100%;
          height: auto;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          &-top {
            width: calc(100% - 0.26rem);
            padding: 0 0.13rem;

            font-size: 12px;
            color: #666666;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #ffffff;
            border: 1px solid #e8e8e8;
          }
          &-bottom {
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            border: 1px solid #e8e8e8;
            &-item {
              width: 100%;
              min-height: 0.4rem;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 12px;
              &-left {
                width: 0.86rem;
                padding: 0 0.12rem;
                background: #f8f8f8;
                text-align: left;
                min-height: 0.4rem;
                line-height: 0.4rem;
                color: #999999;
                border-bottom: 1px solid #fdfdfd;
              }
              &-right {
                padding: 0 0.18rem;
                flex: 1;
                min-height: 0.4rem;
                background: #ffffff;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: wrap;
                &-item {
                  width: auto;
                  height: 0.3rem;
                  padding: 0 0.15rem;
                  color: #000000;
                  text-align: center;
                  line-height: 0.3rem;
                  cursor: pointer;
                }
              }
            }
          }
        }
        &-goods {
          margin-top: 0.3rem;
          width: 100%;
          height: auto;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          &-top {
            width: 100%;
            height: 0.4rem;
            display: flex;
            //justify-content: space-between;
            align-items: center;
            font-size: 0.12rem;
            color: #666666;
            background: #ffffff;
            border: 1px solid #e8e8e8;
            ::v-deep .el-input__inner {
              height: 0.22rem !important;
              padding: 0 !important;
            }
            .item {
              cursor: pointer;
              height: 0.4rem;
              line-height: 0.4rem;
              width: auto;
              padding: 0 0.15rem;
              display: flex;
              align-items: center;
              position: relative;

              .up {
                position: absolute;
                top: 0.05rem;
                left: 0.55rem;
                cursor: pointer;
              }
              .down {
                position: absolute;
                top: 0.18rem;
                left: 0.55rem;
                cursor: pointer;
              }
              .pagebutton {
                margin-left: 0.1rem;
                width: 0.36rem;
                height: 0.2rem;
                line-height: 0.2rem;
                text-align: center;
                color: #999999;
                background: #ffffff;
                box-sizing: border-box;
                border: 0.01rem solid #e8e8e8;
              }
            }
            .newItem {
              color: #e22a1f;
            }
            .search {
              width: auto;
              padding: 0 0.15rem;
              height: 0.4rem;
              line-height: 0.4rem;
              display: flex;
              align-items: center;
              &-button {
                margin-left: 0.1rem;
                width: 0.56rem;
                height: 0.2rem;
                line-height: 0.22rem;
                text-align: center;
                background: #e3e3e3;
                box-sizing: border-box;
                border: 0.01rem solid rgba(0, 0, 0, 0);
              }
            }
          }
          &-medium {
            width: calc(100% - 0.2rem);
            padding: 0.1rem;
            background: #ffffff;
            height: auto;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
          }
          &-bottom {
            width: calc(100% - 0.2rem);
            padding: 0.1rem 0.1rem 0.3rem 0.1rem;
            background: #ffffff;
            height: 0.4rem;
            display: flex;
            justify-content: center;
            align-items: center;
            ::v-deep
              .el-pagination.is-background
              .el-pager
              li:not(.disabled).active {
              background-color: #e22a1f !important;
            }
            ::v-deep .el-pager li {
              width: 0.4rem !important;
              height: 0.4rem !important;
              line-height: 0.4rem !important;
              border-radius: 0.04rem !important;
            }

            ::v-deep .el-pagination span {
              height: 0.4rem !important;
              line-height: 0.4rem !important;
            }
            ::v-deep .el-pagination button {
              width: 0.4rem !important;
              height: 0.4rem !important;
              line-height: 0.4rem !important;
              border-radius: 0.04rem !important;
            }
          }
        }
      }
      &-rightBox {
        width: 2.2rem;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin-left: 20px;
        &-top {
          width: 2.2rem;
          height: 0.56rem;
          background: #ffffff;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .img {
            width: 0.9rem;
            margin-left: 0.2rem;
          }
          .righttext {
            margin-right: 0.26rem;
            color: #a7adb8;
            letter-spacing: 0.02rem;
            font-size: 0.14rem;
          }
        }
        &-adWei {
          margin-top: 0.1rem;
          width: 2.2rem;
          height: 3.6rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          background: #ffffff;
          .img {
            width: 2.2rem;
            height: 2.5rem;
          }
          .message {
            width: 2.2rem;
            flex: 1;
            margin-bottom: 0.1rem;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            .price {
              width: 1.96rem;
              padding: 0 0.12rem;
              height: 0.4rem;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .priceNum {
                font-size: 0.16rem;
                color: #e22a1f;
              }
              .label {
                width: 0.64rem;
                height: 0.18rem;
                position: relative;
                .text {
                  color: #ffffff;
                  font-size: 0.12rem;
                  z-index: 10;
                  width: 0.64rem;
                  height: 0.18rem;
                  line-height: 0.18rem;
                  text-align: center;
                  position: absolute;
                  top: 0;
                  left: 0;
                }
                .img {
                  width: 0.64rem;
                  height: auto;
                  position: absolute;
                  top: 0;
                  left: 0;
                }
              }
            }
            .msgItem {
              width: 1.96rem;
              padding: 0 0.12rem;
              flex: 1;
              text-align: left;
              color: #666666;
              font-size: 0.12rem;
              .num {
                color: #ff4d6d;
              }
            }
          }
        }
        &-recommend {
          margin-top: 0.1rem;
          width: 2.2rem;
          background: #ffffff;
        }
      }
    }
  }
}
</style>
